<script setup lang="ts">
import { ref, onMounted } from 'vue'
import classification from '../../api/classification'
import { useCollectionReviewStore } from '../../store/collectionReview'
import collection from '../../api/collection'
const collectionReviewStore = useCollectionReviewStore()
const valueSelectClassification = ref('')
const selectedLabel = ref('')
const Classification = ref<any[]>([])
const inputName = ref('')
const Time = ref([])
async function submitCollectionReviews(ids: number[]) {
    try {
        // 假设后端接口支持批量审核，需要修改API调用
        await collection.updateCollectionReview(ids)
        // 刷新数据
        /*await collection.getCollectionReviewListtable(
            collectionReviewStore.pageNum,
            collectionReviewStore.pageSize
        ).then(res => {
            collectionReviewStore.collectionReviewTable = res.data.data
        });*/
        await collection.getCollectionReviewSpecie(
            collectionReviewStore.pageNum,
            collectionReviewStore.pageSize,
            null,
            null,
            null
        ).then(res => {
            collectionReviewStore.collectionReviewTable = res.data.data
            collectionReviewStore.collectionStats.totalReview = res.data.total
        })
        // 清空选中
        collectionReviewStore.selectedIds = [];
    } catch (error) {
    } finally {
        collectionReviewStore.changeLoading();
    }
}
// 添加递归查找方法
function findNodeByValue(value: string, tree: any[]): any {
    return tree.some(node => {
        if ((node.value === value)) {
            selectedLabel.value = node.label
        }
        if (node.children?.length) {
            findNodeByValue(value,node.children)
        }
    })
}
// 修改 handleChange
function handleChange(value: string) {
    findNodeByValue(value,Classification.value)
}
async function searchCollectionReview() {
    collection.getCollectionReviewSpecie(
        collectionReviewStore.pageNum,
        collectionReviewStore.pageSize,
        inputName.value,
        selectedLabel.value,
        Time.value
    ).then(res => {
        collectionReviewStore.collectionReviewTable = res.data.data
        collectionReviewStore.collectionStats.totalReview = res.data.total
    }).finally(() => {
        collectionReviewStore.changeLoading()
        selectedLabel.value=''
    })
}
onMounted(async () => {
    await classification.getClassification().then(res => {
        Classification.value = res.data.data
    })
})
</script>

<template>
    <div class="aisde">
        <div class="first-row">
            <div class="classification">
                <div>
                    藏品名称：<el-input v-model="inputName" style="width: 200px;" placeholder="请输入藏品名称" clearable />
                </div>
                <div>
                    分类：<el-tree-select v-model="valueSelectClassification" clearable :data="Classification"
                        @change="handleChange"  check-strictly :render-after-expand="false" style="width: 233px" />
                </div>
            </div>
            <div class="block">
                申请时间：<el-date-picker v-model="Time" type="daterange" range-separator="-" start-placeholder="申请开始日期"
                    end-placeholder="申请结束日期" size="default" value-format="YYYY-MM-DD HH:mm:ss"/>
            </div>
            <el-button type="primary" size="default" @click="searchCollectionReview"><el-icon>
                    <Search />
                </el-icon>搜索</el-button>
        </div>
        <div class="second-row">
            <el-button type="success" size="small" @click="submitCollectionReviews(collectionReviewStore.selectedIds)"
                :disabled="collectionReviewStore.selectedIds.length === 0">
                <el-icon>
                    <Check />
                </el-icon>
                通过
            </el-button>
        </div>
    </div>
</template>

<style scoped>
.aisde {
    display: flex;
    gap: 1rem;
    width: 100%;
    margin: 1rem 0 2rem 1rem;
}

.classification {
    display: flex;
    gap: 1rem;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.aisde {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 2rem 1rem;
}

.first-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.second-row {
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {
  .aisde {
    margin: 1rem 0.5rem;
    width: calc(100% - 1rem);
  }

  .first-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .classification {
    flex-direction: column;
    gap: 0.8rem;
  }

  .classification > div {
    display: flex;
    align-items: center;
  }

  .classification > div :deep(.el-input),
  .classification > div :deep(.el-tree-select) {
    flex: 1;
    width: auto;
    margin-left: 0.5rem;
  }

  .block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .block > span {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .block :deep(.el-date-picker) {
    flex: 1;
    width: 100%;
  }

  .first-row :deep(.el-button) {
    width: 48%;
  }

  .second-row {
    margin-top: 0.5rem;
  }

  .second-row :deep(.el-button) {
    width: 48%;
  }

  /* 按钮容器样式 */
  .button-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
  }
  :deep(.el-button) {
    width: 40%;
  }
}
</style>